<template>
  <view v-if="detail.order_refund_id" class="container p-bottom">
    <!-- 顶部状态栏 -->
    <view class="detail-header dis-flex flex-y-center">
      <view class="header-backdrop">
        <image src="/static/images/refund-bg.png'"></image>
      </view>
      <view class="header-state">
        <text class="f-32 col-f">{{ detail.state_text }}</text>
      </view>
    </view>

    <!-- 商品详情 -->
    <form @submit="onGoodsDetail" :report-submit="true">
      <button
        class="btn-normal"
        formType="submit"
        :data-id="detail.order_goods.goods_id"
      >
        <view class="detail-goods b-f m-top20 dis-flex flex-dir-row">
          <view class="left">
            <image
              class="goods-image"
              :src="detail.order_goods.image.file_path"
            ></image>
          </view>
          <view class="right dis-flex flex-box flex-dir-column flex-x-around">
            <view class="goods-name">
              <text class="twolist-hidden">{{
                detail.order_goods.goods_name
              }}</text>
            </view>
            <view class="dis-flex col-9 f-24">
              <view class="flex-box">{{ detail.order_goods.goods_attr }}</view>
              <text class="t-r">×{{ detail.order_goods.total_num }}</text>
            </view>
          </view>
        </view>
      </button>
    </form>

    <!-- 商品金额 -->
    <view class="detail-order b-f row-block">
      <view class="item dis-flex flex-x-end flex-y-center">
        <text class="">{{ $t("page_refund_detail.Amount_goods") }}：</text>
        <text class="col-m"
          >{{ price_mode.unit }}{{ detail.order_goods.total_pay_price }}</text
        >
      </view>
      <view class="item dis-flex flex-x-end flex-y-center">
        <text class="">{{
          $t("page_refund_detail.Actual_payment_order")
        }}</text>
        <text class="col-m"
          >{{ price_mode.unit }}{{ detail.order_master.pay_price }}</text
        >
      </view>
    </view>

    <!-- 已退款金额 -->
    <view
      v-if="detail.status.value == 20 && detail.type.value == 10"
      class="detail-order b-f row-block dis-flex flex-x-end flex-y-center"
    >
      <text class="">{{ $t("page_refund_detail.Amount_refunded") }}</text>
      <text class="col-m">{{ price_mode.unit }}{{ detail.refund_money }}</text>
    </view>

    <!-- 售后信息 -->
    <view class="detail-refund b-f m-top20">
      <view class="detail-refund__row dis-flex">
        <view class="text">
          <text>{{ $t("page_refund_detail.After_sale_type") }}</text>
        </view>
        <view class="flex-box">
          <text>{{ detail.type.text }}</text>
        </view>
      </view>
      <view class="detail-refund__row dis-flex">
        <view class="text">
          <text>{{ $t("page_refund_detail.Reasons_application") }}</text>
        </view>
        <view class="flex-box">
          <text>{{ detail.apply_desc }}</text>
        </view>
      </view>
      <view v-if="detail.image.length > 0" class="detail-refund__row dis-flex">
        <view class="text">
          <text>{{ $t("page_refund_detail.Application_certificate") }}</text>
        </view>
        <view class="image-list flex-box">
          <view
            class="image-preview"
            v-for="(item, index) in detail.image"
            :key="index"
          >
            <image
              mode="aspectFill"
              :src="item.file_path"
              @tap.stop.prevent="previewImages"
              :data-index="index"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 售后信息 -->
    <view v-if="detail.status.value == 10" class="detail-refund b-f m-top20">
      <view class="detail-refund__row dis-flex">
        <view class="text">
          <text class="col-m">{{
            $t("page_refund_detail.Reason_rejection")
          }}</text>
        </view>
        <view class="flex-box">
          <text>{{ detail.refuse_desc }}</text>
        </view>
      </view>
    </view>

    <!-- 商家收货地址 -->
    <view v-if="detail.is_agree.value == 10" class="detail-address b-f m-top20">
      <view class="detail-address__row address-title">
        <text class="f-30 col-m">{{
          $t("page_refund_detail.Return_address")
        }}</text>
      </view>
      <view class="detail-address__row address-details">
        <view class="address-details__row">
          <text
            >{{ $t("page_refund_detail.consignee") }}：　{{
              detail.address.name
            }}</text
          >
        </view>
        <view class="address-details__row">
          <text
            >{{ $t("page_refund_detail.Contact_number") }}：{{
              detail.address.phone
            }}</text
          >
        </view>
        <view class="address-details__row dis-flex">
          <view class="text">
            <text>{{ $t("page_refund_detail.Full_address") }}</text>
          </view>
          <view class="flex-box">
            <text>{{ detail.address.detail }}</text>
          </view>
        </view>
      </view>
      <view class="detail-address__row">
        <view class="f-26 col-9">
          <text>{{ $t("page_refund_detail.hint1") }}</text>
        </view>
        <view class="f-26 col-9">
          <text>{{ $t("page_refund_detail.hint2") }}</text>
        </view>
      </view>
    </view>

    <!-- 填写物流信息 -->
    <form
      v-if="
        detail.type.value == 10 &&
        detail.is_agree.value == 10 &&
        detail.is_user_send == 0
      "
      @submit="onSubmit"
      report-submit
    >
      <view class="detail-express b-f m-top20">
        <view class="form-group dis-flex flex-y-center">
          <view class="field">{{
            $t("page_refund_detail.Logistics_company")
          }}</view>
          <view class="flex-box">
            <picker
              mode="selector"
              @change="onExpressChange"
              :range="expressList"
              range-key="express_name"
              name="express_id"
              :value="expressList[expressIndex].express_id"
            >
              <text v-if="expressIndex > -1">{{
                expressList[expressIndex].express_name
              }}</text>
              <text v-else class="col-80">{{
                $t("page_refund_detail.p_logistics_company")
              }}</text>
            </picker>
          </view>
        </view>
        <view class="form-group dis-flex flex-y-center">
          <view class="field">{{
            $t("page_refund_detail.Logistics_tracking_number")
          }}</view>
          <view class="flex-box">
            <input
              :placeholder="{{ $t('page_refund_detail.logistics_number') }}"
              name="express_no"
            />
          </view>
        </view>
      </view>

      <!-- 确认发货 -->
      <view class="padding-box profile-btn">
        <button formType="submit" :disabled="disabled">
          {{ $t("page_refund_detail.Confirm_delivery") }}
        </button>
      </view>
    </form>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      // 售后单id
      order_refund_id: null,
      price_mode: uni.getStorageSync("price_mode"),
      // 订单商品详情
      detail: {
        order_refund_id: "",
        state_text: "",

        order_goods: {
          goods_id: "",

          image: {
            file_path: "",
          },

          goods_name: "",
          goods_attr: "",
          total_num: "",
          total_pay_price: "",
        },

        order_master: {
          pay_price: "",
        },

        status: {
          value: 0,
        },

        type: {
          value: 0,
          text: "",
        },

        refund_money: "",
        apply_desc: "",

        image: {
          length: 0,
        },

        refuse_desc: "",

        is_agree: {
          value: 0,
        },

        address: {
          name: "",
          phone: "",
          detail: "",
        },

        is_user_send: 0,
      },

      // 物流公司索引
      expressIndex: -1,

      expressList: [],
      disabled: "",
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */ onLoad: function (options) {
    // 记录页面参数
    this.order_refund_id = options.order_refund_id; // 获取售后单详情

    this.getRefundDetail();
  },
  methods: {
    disable: false,

    /**
     * 获取售后单详情
     */
    getRefundDetail: function () {
      let that = this;

      app.globalData._get(
        "user.refund/detail",
        {
          order_refund_id: this.order_refund_id,
        },
        function (result) {
          that.setData(result.data);
        }
      );
    },

    /**
     * 跳转商品详情
     */
    onGoodsDetail: function (e) {
      // 记录formId
      app.globalData.saveFormId(e.detail.formId);
      uni.navigateTo({
        url: "../../../goods/index?goods_id=" + e.detail.target.dataset.id,
      });
    },

    /**
     * 凭证图片预览
     */
    previewImages: function (e) {
      let imageUrls = [];
      this.detail.image.forEach(function (item) {
        imageUrls.push(item.file_path);
      });
      uni.previewImage({
        current: imageUrls[e.target.dataset.index],
        urls: imageUrls,
      });
    },

    /**
     * 选择物流公司 picker
     */
    onExpressChange: function (e) {
      this.expressIndex= e.detail.value
    },

    /**
     * 表单提交
     */
    onSubmit: function (e) {
      let that = this;
      let values = e.detail.value; // 记录formId
      app.globalData.saveFormId(e.detail.formId); // 判断是否重复提交

      if (that.disable === true) {
        return false;
      } // 表单提交按钮设为禁用 (防止重复提交)

      that.disable = true;
      uni.showLoading({
        title: "正在处理...",
        mask: true,
      }); // 提交到后端

      values["order_refund_id"] = that.order_refund_id;

      app.globalData._post_form(
        "user.refund/delivery",
        values,
        function (result) {
          app.globalData.showSuccess(result.msg, function () {
            // 获取售后单详情
            that.getRefundDetail();
          });
        },
        false,
        function () {
          uni.hideLoading(); // 解除禁用

          that.disable = false;
        }
      );
    },
  },
};
</script>
<style>
@import "./detail.css";
</style>
